<template>
	<view class="recommend">
		<!-- 背景图片 -->
		<image :src="img" class="bg-image"></image>
		<!-- 背景图片 -->
		<!-- 转发和静音 -->
		<view class="control_wrap">
			<view class="music" @click="check">
				<view :class="['iconfont',!curent?'icon-shengyin':'icon-jingyin']">
					
				</view>
			</view>
			<view class="zhuanfa">
				<button open-type="share"></button>
				<view class="iconfont icon-zhuanfa">
					
				</view>
			</view>
		</view>
		<!-- 转发和静音 -->

		<!-- 视频播放器 -->
		<view class="video_wrap">
			<video :src="video" controls objectFit="fill" :muted="curent"></video>
		</view>
		<!-- 视频播放器 -->
		<!-- 下载视频 -->
			<view class="onload" @click="ondown">
				下载视频
			</view>
		<!-- 下载视频 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				img: "",
				video: "",
				curent:false
			}
		},
		methods: {
			check(){
				this.curent = !this.curent
			},
			// 下载
			async ondown(){
				uni.showLoading({title:"下载中"})
				let {tempFilePath} =(await uni.downloadFile({url:this.video}))[1];
				await uni.saveVideoToPhotosAlbum({filePath:tempFilePath})
				uni.hideLoading();
				uni.showToast({
					title:"下载完成"
				})
			}
		},
		components: {

		},
		onLoad(opations) {
			wx.setNavigationBarTitle({
				title: "推荐视频"
			})
			this.img = opations.img
			this.video = opations.video

		},
		

	}
</script>

<style lang="scss">
	.recommend{
		position: relative;
		height: 100vh;
	}
	.bg-image{
		position: absolute;
		width: 100%;
		height: 100%;
		filter: blur(10rpx);
		z-index: -1;
	}
	
	.control_wrap {
		display: flex;
		justify-content: flex-end;
		padding: 20rpx 0;
		
		.music,
		.zhuanfa {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 60rpx;
			height: 60rpx;
			background-color: rgba(0, 0, 0, .5);
			border-radius: 30rpx;
			color: #FFFFFF;
			margin-right: 30rpx;
			button{
				position: absolute;
				left: 0;
				height: 0;
				width:100%;
				height: 100%;
				opacity: 0;
			}
		}

	}

	.video_wrap {
		width: 80vw;
		margin: 0 auto;
		height: 800rpx;
		border-radius: 5rpx;
		video {
			width: 100%;
			height: 100%;
			border-radius: 5rpx;
		}
	}
	.onload{
		margin: 20rpx auto;
		width:400rpx;
		height: 80rpx;
		line-height: 80rpx;
		border: 2rpx solid #C0C0C0;
		background-color: rgba(0,0,0,.5);
		border-radius: 20rpx;
		text-align: center;
		color: #FFFFFF;
	}
</style>
